<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>分页</title>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.3.1.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap-combined.min.css">

<!--    <link href="css/bootstrap.min.css" rel="stylesheet">-->
    <script>
        $(function(){
            var pageNumber = 0;
            //上一页
            $("#last-page").click(function () {
                if (pageNumber>0){
                    pageNumber = pageNumber - 1;
                    $.get("limit",{pageNumber:pageNumber},function (data) {
                        var html;
                        for (let dataKey in data) {
                            //alert(data[dataKey].uid+data[dataKey].uname+data[dataKey].uage+data[dataKey].uinfo);
                            html =   html+        "<tr class='success'>\n" +
                                "                    <td>\n" +
                                "                        \n" +data[dataKey].uid+
                                "                    </td>\n" +
                                "                    <td>\n" +
                                "                        \n" +data[dataKey].uname+
                                "                    </td>\n" +
                                "                    <td>\n" +
                                "                        \n" +data[dataKey].uage+
                                "                    </td>\n" +
                                "                    <td>\n" +
                                "                        \n" +data[dataKey].uinfo+
                                "                    </td>\n" +
                                "                </tr>\n";
                        }
                        $("#tbody").html(html);
                    },"json")
                }else {
                    alert("这是第一页！！")
                }
            })
            //下一页
            $("#next-page").click(function () {

                $.get("limit",{pageNumber:pageNumber},function (data) {
                    var html;
                    if (data.length!=0){
                        for (let dataKey in data) {
                            //alert(data[dataKey].uid+data[dataKey].uname+data[dataKey].uage+data[dataKey].uinfo);
                            html =   html+        "<tr class='success'>\n" +
                                "                    <td>\n" +
                                "                        \n" +data[dataKey].uid+
                                "                    </td>\n" +
                                "                    <td>\n" +
                                "                        \n" +data[dataKey].uname+
                                "                    </td>\n" +
                                "                    <td>\n" +
                                "                        \n" +data[dataKey].uage+
                                "                    </td>\n" +
                                "                    <td>\n" +
                                "                        \n" +data[dataKey].uinfo+
                                "                    </td>\n" +
                                "                </tr>\n";
                        }
                        $("#tbody").html(html);
                    }else {
                        alert("这已经是最后一页了！");
                    }

                },"json")
                pageNumber = pageNumber + 1;
            })

            })

    </script>


</head>
<body>
<br>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <h3 class="text-center text-success">
                测试分页
            </h3>
            <table class="table table-bordered table-hover">
                <thead class="error">
                <tr class="error">
                    <th>
                        编号
                    </th>
                    <th>
                        姓名
                    </th>
                    <th>
                        年龄
                    </th>
                    <th>
                        备注
                    </th>
                </tr>
                </thead>
                <tbody id="tbody">



                </tbody>
            </table>
            <br>
            <div class="pagination pagination-large pagination-centered" >
                <ul>
                    <li>
                        <a id="last-page">上一页</a>
                    </li>

                    <li>
                        <a id="next-page">下一页</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>




</body>
</html>